<template>
  <ad-form v-bind="formConfig"></ad-form>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import {
  bankCardFormat,
  cardFormat,
  isCard,
  isMobile,
  isSMs,
  mobileFormat,
  noNumericToBlank,
} from "@fe-hl/utils";

// 快捷选择
const shortcuts = [
  {
    text: "一周内",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "一个月内",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "三个月内",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
  {
    text: "一年内",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
      return [start, end];
    },
  },
];
// 直接范围一年内，不能过过当前时间
const disabledDate = (time: Date) => {
  const curDate = new Date().getTime();
  const three = 365 * 24 * 3600 * 1000;
  const threeMonths = curDate - three;
  return time.getTime() > Date.now() || time.getTime() < threeMonths;
};

const formConfig = reactive({
  handlerUpload: async (file, formConfig) => {
    console.log(formConfig);
    let formData = new FormData();
    formData.append("file", file.file);
    return Promise.resolve();
  },
  handlerSubmit: (formModels) => {
    console.log(formModels);
    return Promise.resolve();
  },
  formModelValues: {
    mobilePhone: "17621959589",
  },
  formConfigList: [
    {
      componentType: "text",
      label: "手机号格式化",
      type: "text",
      placeholder: "请输入手机号",
      key: "mobilePhone",
      formatter: mobileFormat,
      maxlength: 13,
      rules: [
        {
          required: false,
          message: "请输入合法的11位手机号",
          validator: (rule, value, callback) => {
            if (!isMobile(value.replace(/\s/gi, ""))) {
              callback(new Error("请输入合法的11位手机号"));
            } else {
              callback();
            }
          },
        },
      ],
    },
    {
      componentType: "text",
      label: "身份证",
      type: "text",
      placeholder: "请输入身份证",
      key: "card",
      formatter: cardFormat,
      maxlength: 20,
      rules: [
        {
          required: false,
          message: "请输入合法18位身份证号",
          validator: (rule, value, callback) => {
            if (!isCard(value.replace(/\s/gi, ""))) {
              callback(new Error("请输入合法18位身份证号"));
            } else {
              callback();
            }
          },
        },
      ],
    },
    {
      componentType: "text",
      label: "银行卡号",
      type: "text",
      placeholder: "请输入银行卡号",
      key: "bankCard",
      formatter: bankCardFormat,
      maxlength: 24,
      rules: [{ required: true, message: "请输入银行卡号" }],
    },
    {
      label: "验证码",
      componentType: "sms",
      type: "text",
      formatter: noNumericToBlank,
      placeholder: "请输入验证码",
      beforeValidateKey: ["mobilePhone"],
      key: "smsCode",
      handlerCountdown: (countdown) => {
        countdown();
      },
      maxlength: 6,
      rules: [
        {
          required: false,
          message: "请输入6位数字验证码",
          validator: (rule, value, callback) => {
            if (!isSMs(value)) {
              callback(new Error("请输入6位数字验证码"));
            } else {
              callback();
            }
          },
        },
      ],
    },
    {
      componentType: "text",
      type: "text",
      label: "商户号",
      formatter: noNumericToBlank,
      placeholder: "请输入商户号",
      key: "mercId",
      rules: [{ required: false, message: "请输入商户号" }],
    },
    {
      componentType: "switch",
      label: "状态",
      defaultValue: true,
      key: "off",
    },
    {
      componentType: "checkbox",
      label: "复选",
      key: "checkboxs",
      rules: [{ required: false, message: "请选择复选框组" }],
      options: [
        {
          label: "男",
          value: 1,
        },
        {
          label: "女",
          value: 2,
        },
      ],
    },
    {
      componentType: "radio",
      label: "单选",
      key: "radio",
      defaultValue: "m",
      rules: [{ required: false, message: "请选择单选" }],
      options: [
        {
          label: "男",
          value: "s",
        },
        {
          label: "女",
          value: "m",
        },
      ],
    },
    {
      componentType: "stepper",
      label: "步进器",
      key: "stepper",
    },
    {
      componentType: "rate",
      label: "评分",
      key: "rate",
    },
    {
      componentType: "slider",
      label: "滑块",
      key: "slider",
    },
    {
      componentType: "select",
      label: "选择城市",
      placeholder: "选择城市",
      key: "city",
      confirmCallback: (formModel, formModels, opt) => {
        console.log(formModel);
        console.log(formModels);
        console.log(opt);
      },
      options: [
        { label: "杭州", value: "Hangzhou" },
        { label: "宁波", value: "Ningbo" },
        { label: "温州", value: "Wenzhou" },
        { label: "绍兴", value: "Shaoxing" },
        { label: "湖州", value: "Huzhou" },
      ],
      rules: [{ required: false, message: "选择城市" }],
    },
    {
      componentType: "select",
      label: "选择城市模糊查询",
      placeholder: "选择城市",
      key: "cityFuzzy",
      remote: true,
      getOptions: () => {
        let list = [
          { label: "杭州1222", value: "Hangzhou" },
          { label: "宁波2", value: "Ningbo" },
          { label: "温州", value: "Wenzhou" },
          { label: "绍兴", value: "Shaoxing" },
          { label: "湖州", value: "Huzhou" },
        ];
        return Promise.resolve(list);
      },
      confirmCallback: (formModel, formModels, opt) => {
        console.log(formModel);
        console.log(formModels);
        console.log(opt);
      },
      rules: [{ required: false, message: "选择城市" }],
    },
    {
      componentType: "date",
      type: "daterange",
      dateFormat: "YYYY-MM-DD",
      label: "时间选择",
      placeholder: "选择时间选择",
      shortcuts: shortcuts,
      disabledDate: disabledDate,
      key: "dateRange",
      rules: [{ required: false, message: "选择时间选择" }],
    },
    {
      componentType: "uploader",
      label: "文件上传",
      maxCount: 5,
      key: "uploader",
      tip: "jpg/png files with a size less than 2000KB",
      rules: [{ required: false, message: "请选择文件上传" }],
      beforeRead: (file) => {
        console.log(file);
        // 可拦截
        return true;
      },
    },
  ],
});
</script>
